<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      margin: 10px auto;
      width: 400px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 25px;
      background-color: antiquewhite;
    }
    span{
      font-size: 25px;
    }
  </style>
</head>
<body>
  <div>
    现在是<span class="a"></span>年<span class="b"></span>月<span class="c"></span>日
  </div>
  <div>
    今天还剩<span class="d"></span>时<span class="e"></span>分<span class="f"></span>秒
  </div>
  <div>
    今天就是<span class="g"></span>时<span class="h"></span>分<span class="i"></span>秒
  </div>
  <script>
    var a = document.querySelector('.a')
    var b = document.querySelector('.b')
    var c = document.querySelector('.c')
    var d = document.querySelector('.d')
    var e = document.querySelector('.e')
    var f = document.querySelector('.f')
    var g = document.querySelector('.g')
    var h = document.querySelector('.h')
    var i = document.querySelector('.i')
    var s_time = function(){
      var date = new Date
      a.innerText = date.getFullYear()
      b.innerText = parseInt(date.getMonth()) + 1
      c.innerText = date.getDate()
      if(date.getMinutes() == '0' && date.getSeconds() == '0')
      {
        if(23 - parseInt(date.getHours())<10)
        {d.innerText ='0' + String(23 - parseInt(date.getHours()))}
        else{d.innerText = 24 - parseInt(date.getHours())}
        e.innerText = '00'
        f.innerText = '00'
      }
      else
      {
        if(date.getSeconds() == '0')
        {
          if(23 - parseInt(date.getHours())<10)
          {d.innerText ='0' + String(23 - parseInt(date.getHours()))}
          else{d.innerText = 23 - parseInt(date.getHours())}
          if(60 - parseInt(date.getMinutes())<10)
          {e.innerText ='0' + String(60 - parseInt(date.getMinutes()))}
          else{e.innerText = 60 - parseInt(date.getMinutes())}
          f.innerText = '00'
        }
        else
        {
          if(23 - parseInt(date.getHours())<10)
          {d.innerText ='0' + String(23 - parseInt(date.getHours()))}
          else{d.innerText = 23 - parseInt(date.getHours())}
          if(59 - parseInt(date.getMinutes())<10)
          {e.innerText ='0' + String(59 - parseInt(date.getMinutes()))}
          else{e.innerText = 59 - parseInt(date.getMinutes())}
          if(60 - parseInt(date.getSeconds())<10)
          {f.innerText ='0' + String(60 - parseInt(date.getSeconds()))}
          else{f.innerText = 60 - parseInt(date.getSeconds())}
        }
      }
    }
    var x_time = function(){
      var date = new Date
      if(parseInt(date.getHours())<10)
      {g.innerText ='0' + String(parseInt(date.getHours()))}
      else{g.innerText =parseInt(date.getHours())}
      if(parseInt(date.getMinutes())<10)
      {h.innerText ='0' + String(parseInt(date.getMinutes()))}
      else{h.innerText =parseInt(date.getMinutes())}
      if(parseInt(date.getSeconds())<10)
      {i.innerText ='0' + String(parseInt(date.getSeconds()))}
      else{i.innerText =parseInt(date.getSeconds())}
    }
    s_time()
    x_time()
    var timer = setInterval(function(){
      if(d.innerText == '00' && e.innerText == '00' && f.innerText == '00')
      {
        clearInterval(timer)
      }
      else
      {
        s_time()
        x_time()
      } 
    } ,1000)
  </script>
</body>
</html>